import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const paginatorStyle = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
});

globalStyle(`${paginatorStyle}>button`, {
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	padding: '0 0.5em',
	height: '2.2em',
	margin: '0.2em',
	userSelect: 'none',
	color: vars.color.regularText,
	backgroundColor: 'transparent',
	border: 'none',
	fontSize: '1rem',
});

globalStyle(`${paginatorStyle}>button:not(.disable)`, {
	cursor: 'pointer',
});

globalStyle(`${paginatorStyle}>button:hover`, {
	color: 'red',
});

globalStyle(`${paginatorStyle}.outline>button`, {
	border: `1px solid ${vars.color.border}`,
	backgroundColor: vars.color.infoBackground,
});

globalStyle(`${paginatorStyle}>button>svg`, {
	fill: vars.color.secondaryText,
	width: '1.2em',
	height: '1.2em',
});

globalStyle(`${paginatorStyle}>button:not(.disable):hover>svg`, {
	fill: 'red',
});

globalStyle(`${paginatorStyle}>button.svg`, {
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
});

globalStyle(`${paginatorStyle}>button.active`, {
	color: vars.color.brand,
	fontWeight: 'bold',
});

globalStyle(`${paginatorStyle}.outline>button.active`, {
	color: vars.color.buttonText,
	borderBlockColor: vars.color.brand,
	backgroundColor: vars.color.brand,
});
